<template>
	<view class="uni-popup-share">
		<h3 class="header">预览</h3>
		<view style="transform: scale(0.8);transform-origin: top center;height: 900rpx;">
			<view class="dateAndLogo">
				<view class="date">
					<text class="day">{{ date.day }}</text>
					<text class="year">{{ date.month }} . {{ date.year }}</text>
				</view>
				<image :src="diary.logoImgUrl" aspectFill style="width: 256rpx;height: 33rpx;"></image>
			</view>
			<view class="diaryBox">
				<view class="diaryImgBox"><image class="diaryImg" :src="imgUrl" aspectFill></image></view>
				<view class="diaryFooter">{{ beautifulDiary.diaryContent }}</view>
				<view class="diaryOutFooter">
					<text>{{ beautifulDiary.userName }}</text>
				</view>
				<view class="diaryOutFooter"><image :src="diary.qrCodeImgUrl" aspectFill style="width: 118rpx;height: 118rpx;"></image></view>
			</view>
		</view>
		<view class="uni-share-button-box">
			<button class="uni-share-button-cancel" @click="close">关闭</button>
			<view class="line">|</view>
			<!-- #ifdef MP-WEIXIN -->
			<button class="uni-share-button-share" open-type="share" plain="true" style="border: none;">分享</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<button class="uni-share-button-share" plain="true" style="border: none;" @click="wxShare">分享</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
import http from '../../common/request.js';
import bridgeApi from '../../common/rayBridgeSDK.js';
import {getWxShareHref} from '../../common/utils.js';
export default {
	name: 'UniPopupShareDiary',
	props: {
		beautifulDiary: {
			type: Object,
			default() {
				return {};
			}
		},
		imgUrl: String,
		date: {
			type: Object,
			default: function() {
				return {};
			}
		},
		shareDiary: {
			type: Function,
			default: null
		}
	},
	inject: ['popup'],
	data() {
		return {
			diary: {}
		};
	},
	watch: {
		beautifulDiary: {
			handler(val) {
				if (val.id) {
					http('/api/cusBeautifulDiary/shareInfo/' + val.id, { method: 'GET' }).then(result => {
						this.diary = result.data;
					});
				}
			},
			deep: true
		}
	},
	created() {},
	methods: {
		wxShare() {
			const { diaryContent, imgUrl } = this.beautifulDiary;
			bridgeApi.wxShare({ title: diaryContent, imageUrl: imgUrl, shareUrl: getWxShareHref() }).then(res => {
				uni.showToast({
					title: res,
					icon: 'none'
				})
			});
		},
		/**
		 * 关闭窗口
		 */
		close() {
			this.popup.close();
		},
		onShareAppMessage(res) {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 2,
				imageUrl: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/heart.png',
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.header {
	height: 100rpx;
	font-size: 36rpx;
	font-weight: 400;
	color: rgba(102, 100, 93, 1);
	line-height: 100rpx;
	text-align: center;
}

.dateAndLogo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 28rpx;
}

.dateAndLogo image {
	width: 160rpx;
	height: 37rpx;
}

.diaryFooter {
	margin: 40rpx 40rpx 88rpx 40rpx;
	height: auto;
	font-size: 22rpx;
	font-weight: 300;
	color: rgba(138, 140, 141, 1);
	line-height: 46rpx;
	text-align: center;
	display: block;
}

.uni-popup-share {
	background-color: #fff;
	border-radius: 12rpx;
	width: 670rpx;
	overflow: hidden;
}

.uni-share-button-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	background: #f8f8f8;
	border-radius: 50px;
}

.uni-share-button-share {
	flex: 1;
	color: rgba(102, 100, 93, 1);
	font-size: 16px;
	border-radius: 0;
	background: #f8f8f8;
}

.uni-share-button-cancel {
	flex: 1;
	color: rgba(102, 100, 93, 1);
	font-size: 16px;
	border-radius: 0 0 0 12rpx;
}

.uni-share-button-cancel::after {
	border: 0;
}

.uni-share-button-share::after {
	border: 0;
}

.line {
	color: rgba(102, 100, 93, 0.15);
	background: #f8f8f8;
	line-height: 40rpx;
}

.date {
	height: 90rpx;
	line-height: 90rpx;
	font-family: DIN Alternate Bold;
	color: rgba(102, 100, 93, 1);
}

.day {
	font-size: 54rpx;
	padding: 0 10rpx;
}

.year {
	font-size: 22rpx;
	padding: 0 10rpx;
}

.diaryBox {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(102, 100, 93, 0.1);
	border-radius: 20rpx;
	width: 614rpx;
	position: relative;
	margin: 0 28rpx;
	overflow: hidden;
}

.diaryBox text {
	margin: 40rpx 40rpx 88rpx;
	color: rgba(102, 100, 93, 1);
	line-height: 46rpx;
	display: block;
}

.diaryImgBox {
	position: relative;
	height: 454rpx;
	z-index: 1;
	display: flex;
	justify-content: space-around;
	align-items: center;
	overflow: hidden;
}

.diaryImg {
	position: absolute;
	width: 100%;
	height: 454rpx;
	z-index: -1;
	border-radius: 20rpx 20rpx 0 0;
}

.diaryOutFooter {
	margin: 32rpx auto 24rpx auto;
	position: relative;
	display: block;
	position: relative;
	text-align: center;
	font-size: 24rpx;
}

.diaryOutFooter text {
	padding: 0 30rpx;
	color: rgba(138, 140, 141, 1);
	margin: auto;
	background: #fff;
}

button {
	&:after {
		border: none;
	}
}
</style>
